import React, { Component } from 'react'
import CustomButton from 'src/components/button/CustomButton'
import { Text, View, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'
import { ONE_PIXEL, ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import { unitList, getSettlementMethod } from 'src/utils/ConfigUtil'
import { updatePostDefault } from 'src/utils/RequestAPI'
import { utilToKilo } from 'src/utils/TimeUtil'

export default class HotJobComponent extends Component {
  static propTypes = {
    hotJobArr: PropTypes.array,
    activeLabel: PropTypes.string,
    itemClick: PropTypes.func
  }

  constructor (props) {
    super(props)
    this.state = {
      activeLabel: props.activeLabel
    }
  }

  render () {
    const { hotJobArr } = this.props
    const { activeLabel } = this.state
    return (
      <View style={styles.hotView}>
        {hotJobArr.map((item, outIndex) => {
          if (item.title === '全部') {
            return null
          } else {
            return (
              <View style={styles.hotContentView} key={outIndex.toString()}>
                <Text style={styles.hotTitle}>{item.title}</Text>
                {item.content.map((contentItem) => {
                  console.info(contentItem, 'contentItemcontentItemcontentItem')
                  const unit = contentItem
                    ? unitList[(contentItem.unit + '') ? contentItem.unit : contentItem.settlementMethod * 1 + 1] : {}
                  return (
                    <CustomButton
                      style={[styles.itemView, contentItem.label === activeLabel && { backgroundColor: '#FFE400' }]}
                      key={contentItem.label}
                      onPress={this._itemClick}
                      params={contentItem}>
                      <Text style={[styles.itemText]}>{contentItem.label}</Text>
                      <Text
                        style={styles.itemText}>{`${utilToKilo(contentItem.salary)}${contentItem.salary >= 10000 ? '' : '元'}/${unit}`}</Text>
                    </CustomButton>
                  )
                })}
              </View>
            )
          }
        })}
        <View>
          <View style={styles.line} />
          <CustomButton style={styles.completeBtnView} onPress={this._completeClick}>
            <Text style={styles.completeText}>完成</Text>
          </CustomButton>
        </View>
      </View>
    )
  }

  _itemClick = (item) => {
    this.item = item
    this.setState({ activeLabel: item.label })
  }

  _completeClick = () => {
    const { itemClick, hotJobArr: [{ content }] } = this.props
    if (!this.item) {
      this.item = content.find((item) => {
        return item.isDefault
      })
    } else {
      updatePostDefault({
        params: {
          postId: this.item.postId,
          type: this.item.postType
        }
      }).then(() => {

      })
    }
    itemClick && itemClick(this.item)
  }
}

const styles = StyleSheet.create({
  hotView: {},
  hotContentView: {
    padding: ScaleS(20)
  },
  hotTitle: {
    color: '#666666',
    fontSize: ScaleT(14),
    fontWeight: '400',
    marginVertical: ScaleS(10)
  },
  itemView: {
    backgroundColor: '#F7F7F7',
    borderRadius: ScaleS(5),
    height: ScaleS(50),
    marginTop: ScaleS(15),
    paddingHorizontal: ScaleS(14),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  itemText: {
    color: '#3C3C3C',
    fontSize: ScaleT(15),
    fontWeight: '500'
  },
  line: {
    backgroundColor: 'rgba(0,0,0,0.2)',
    height: ONE_PIXEL,
    marginTop: ScaleS(14)
  },
  completeBtnView: {
    height: ScaleS(70),
    alignItems: 'center',
    justifyContent: 'center'
  },
  completeText: {
    color: '#000000',
    fontSize: ScaleT(17),
    fontWeight: '400'
  }
})
